<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.prime.com.tr/ui"
        xmlns:finantial="http://java.sun.com/jsf/composite/components/finantial"
        template="/template/main-template.xhtml"
        xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="head">

        <ui:param name="menu" value="1"/>
        <ui:param name="conf" value="0"/>
        <ui:param name="finance" value="1"/>
         <ui:param name="admin" value="1"/>
    </ui:define>
    <ui:define name="theme"/>
    <ui:define name="content">
        <h:form id="config_form">
        <p:panel header="Configurações">
            <p:outputPanel id="edit_user">
                <p:fieldset legend="Configurações do usuário">
                    <h:panelGrid columns="2" >
                        <finantial:label  for="edit-username" value="Login:" required="false"/>
                        <h:column>
                            <h:panelGrid columns="3" id="edit_name_grid" cellspacing="5">
                                <h:commandLink value="#{configurationBean.user.username}" title="#{msg['config.update']}" id="edit-username" styleClass="font-bold" rendered="#{!configurationBean.editName}">
                                    <f:ajax event="click" execute="edit-username" render="edit_name_grid" listener="#{configurationBean.editnameListener}"/>
                                </h:commandLink>
                                <p:outputPanel rendered="#{configurationBean.editName}" >
                                    <finantial:input  messages="edit_user_msg" form="config_form" value="#{configurationBean.user.username}"/>
                                    <p:commandButton  value="salvar" actionListener="#{configurationBean.updateUsername}" global="false"
                                                      process="edit_name_grid" update="edit_name_grid edit_user_msg"/>
                                    <p:commandButton value="cancelar" id="cancel_username" process="edit_name_grid" global="false"
                                                     update="edit_name_grid edit_user_msg" immediate="true" actionListener="#{configurationBean.cancelEdit}"/>
                                </p:outputPanel>
                            </h:panelGrid>
                        </h:column>
                        <finantial:label for="edit_pass" value="Senha:" required="false"/>
                        <h:column>
                            <p:outputPanel id="p1" style="padding: 4px">
                                <h:commandLink value="*******" title="#{msg['config.update']}" id="edit-pass" style="font-weight: bold;cursor: pointer;padding-left: 2px" rendered="#{!configurationBean.editPass}">
                                    <f:ajax event="click" execute="edit-pass" render="p1 p2 p3" listener="#{configurationBean.editPassListener}"/>
                                </h:commandLink>
<!--                                <finantial:input value="#{configurationBean.user.password}" secret="#{true}" ajax="#{false}" id="edit_pass" messages="edit_user_msg" form="config_form" ccrendered="#{configurationBean.editPass}"/>-->
                                    <h:inputSecret  rendered="#{configurationBean.editPass}" id="edit_pass" value="#{configurationBean.user.password}" />
                            </p:outputPanel>
                        </h:column>
                        <p:outputPanel id="p3">
                            <h:inputHidden rendered="#{!configurationBean.editPass}"/>
                            <finantial:label rendered="#{configurationBean.editPass}" for="repeat_pass" value="Repetir Senha:" required="false"/>
                        </p:outputPanel>
                        <h:column>
                        <p:outputPanel id="p2">
                                <h:panelGrid columns="3" rendered="#{configurationBean.editPass}" id="edit_pass_panel">
<!--                                    <finantial:input value="#{configurationBean.repeatPass}" secret="#{true}" ajax="#{false}" id="repeat_pass" messages="edit_user_msg" form="config_form" ccrendered="#{configurationBean.editPass}"/>-->
                                    <h:inputSecret rendered="#{configurationBean.editPass}" id="repeat_pass" value="#{configurationBean.repeatPass}" />

                                    <p:commandButton value="salvar" actionListener="#{configurationBean.updatePass}" process="p1 p2 p3" update="p1 p2 p3 edit_user_msg"/>
                                    <p:commandButton value="cancelar" id="cancel_pass" immediate="true" global="false"
                                                     process="p1 p2 p3" update="p1 p2 p3 edit_user_msg" actionListener="#{configurationBean.cancelEdit}"/>
                                </h:panelGrid>
                        </p:outputPanel>
                        </h:column>
                        <finantial:label for="edit-fullname" value="Nome:" required="false"/>
                        <h:column>
                            <h:panelGrid columns="3" id="edit_fullname_grid" cellspacing="5">
                                <h:commandLink value="#{configurationBean.user.fullname}" title="#{msg['config.update']}" id="edit-fullname" styleClass="font-bold" rendered="#{!configurationBean.editFullName}">
                                    <f:ajax event="click" execute="edit-fullname" render="edit_fullname_grid" listener="#{configurationBean.editFullnameListener}"/>
                                </h:commandLink>
                                <p:outputPanel rendered="#{configurationBean.editFullName}">
                                    <finantial:input value="#{configurationBean.user.fullname}" messages="edit_user_msg" form="config_form" />
                                    <p:commandButton value="salvar" actionListener="#{configurationBean.updateFullname}" process="edit_fullname_grid" update="edit_fullname_grid edit_user_msg"/>
                                    <p:commandButton value="cancelar" id="cancel_fullname" process="edit_fullname_grid" immediate="true" 
                                                     update="edit_fullname_grid edit_user_msg" global="false" actionListener="#{configurationBean.cancelEdit}"/>
                                </p:outputPanel>
                            </h:panelGrid>
                        </h:column>
                        <finantial:label for="user-theme" value="Tema:" required="false"/>
                        <h:column>
                            <h:panelGrid columns="4" id="edit_theme_grid" cellspacing="5">
                                <h:commandLink value="#{configurationBean.user.userTheme}" title="#{msg['config.update']}" id="user-theme" styleClass="font-bold" rendered="#{!configurationBean.editTheme}">
                                    <f:ajax event="click" execute="user-theme" render="edit_theme_grid" listener="#{configurationBean.editThemeListener}"/>
                                </h:commandLink>
                                <p:outputPanel rendered="#{configurationBean.editTheme}">
                                    <h:selectOneMenu  value="#{configurationBean.userTheme}">
                                        <f:selectItem itemValue="aristo" itemLabel="Aristo"/>
                                        <f:selectItem itemValue="bluesky" itemLabel="Bluesky"/>
                                        <f:selectItem itemValue="casablanca" itemLabel="Casablanca"/>
                                        <f:selectItem itemValue="cupertino" itemLabel="Cupertino"/>
                                        <f:selectItem itemValue="dark-sky" itemLabel="Dark-sky"/>
                                        <f:selectItem itemValue="dot-luv" itemLabel="Dot-luv"/>
                                        <f:selectItem itemValue="mint-choc" itemLabel="Mint-choc"/>
                                        <f:selectItem itemValue="overcast" itemLabel="Overcast"/>
                                        <f:selectItem itemValue="pepper-grinder" itemLabel="Pepper-grinder"/>
                                        <f:selectItem itemValue="ui-darkness" itemLabel="Ui-darkness"/>
                                        <f:selectItem itemValue="vader" itemLabel="Vader"/>
                                    </h:selectOneMenu>
                                    <p:commandButton  value="salvar" action="#{configurationBean.changeUserTheme}" ajax="true" process="edit_theme_grid" update="@form"/>
                                    <p:commandButton  id="cancel_theme" value="cancelar" process="edit_theme_grid" update="edit_theme_grid edit_user_msg" global="false" immediate="true" actionListener="#{configurationBean.cancelEdit}"/>
                                </p:outputPanel>
                            </h:panelGrid>
                        </h:column>
                    </h:panelGrid>
                    <p:messages id="edit_user_msg"/>


                </p:fieldset>
            </p:outputPanel>
            <p:fieldset legend="Gerenciar Tipos" style="margin-top: 15px">
                <table width="100%">
                    <tr>
                        <td align="left" width="50%">
                            <p:outputPanel id="outcome_types">
                                <p:panel header="Tipos de Despesa">
                                    <p:dataTable value="#{configurationBean.outcomeTypes}" rendered="#{not empty configurationBean.outcomeTypes}" var="o" paginator="true" rows="5" rowIndexVar="rowIndex" rowStyleClass="#{empty rowIndex or rowIndex mod 2 ne 0 ? 'even-row' : ''}"
                                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                                 emptyMessage="Nenhum registro encontrado" paginatorPosition="bottom" rowsPerPageTemplate="5,10,15,#{configurationBean.outcomeTypesSize > 15 ? configurationBean.outcomeTypesSize : ''}" style="border: none">
                                        <p:column sortBy="#{o.description}" >
                                            <f:facet name="header">
                                                Descrição
                                            </f:facet>
                                            <h:outputText value="#{o.description}"/>
                                        </p:column>
                                        <p:column>
                                            <f:facet name="header">
                                                Editar
                                            </f:facet>
                                            <div align="center">
                                                <p:commandLink oncomplete="editOutcometypeModal.show()" immediate="true" action="#{configurationBean.prepareEditOutcome(o)}" update="edit_outcometype_panel">
                                                    <h:graphicImage library="images" name="edit20x20.png" style="border: none;"/>
                                                </p:commandLink>
                                            </div>
                                        </p:column>
                                        <p:column>
                                            <f:facet name="header">
                                                Remover
                                            </f:facet>
                                            <div align="center">
                                                <p:commandLink oncomplete="removeOutcometypeModal.show()" immediate="true" update="remove_outcometype_panel">
                                                    <f:setPropertyActionListener target="#{configurationBean.outcomeType}" value="#{o}"/>
                                                    <h:graphicImage library="images" name="garbage20x20.png" style="border: none;"/>
                                                </p:commandLink>
                                            </div>
                                        </p:column>
                                    </p:dataTable>
                                    <div align="center" style="padding-top: 8px;" >
                                        <p:commandButton title="incluir tipo"  value="Novo Tipo" immediate="true" update="outcome_type_form:outcometype_panel outcome_type_form:outcome_type_msg"  oncomplete="outcometypeModal.show()" />
                                    </div>
                                    <div align="center" style="padding-top: 8px;">
                                        <h:outputText value="Nenhum tipo cadastrado" style="color: red;font-size: 14px;padding-bottom: 10px" rendered="#{empty configurationBean.outcomeTypes}"/>
                                    </div>
                                </p:panel>
                            </p:outputPanel>
                        </td>
                        <td align="right" width="50%">
                             <p:outputPanel id="income_types">
                                <p:panel header="Tipos de Receita">
                                    <p:dataTable value="#{configurationBean.incomeTypes}" rendered="#{not empty configurationBean.incomeTypes}" var="i" paginator="true" paginatorPosition="bottom" rows="5"
                                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowIndexVar="rowIndex" rowStyleClass="#{empty rowIndex or rowIndex mod 2 ne 0 ? 'even-row' : 'odd-row'}"
                                                 emptyMessage="Nenhum registro encontrado" rowsPerPageTemplate="5,10,15,#{configurationBean.incomeTypesSize > 15 ? configurationBean.incomeTypesSize : ''}" style="border: none">
                                        <p:column sortBy="#{i.description}">
                                            <f:facet name="header">
                                                Descrição
                                            </f:facet>
                                            <h:outputText value="#{i.description}"/>
                                        </p:column>
                                        <p:column>
                                            <f:facet name="header">
                                                Editar
                                            </f:facet>
                                            <div align="center">
                                                <p:commandLink  action="#{configurationBean.prepareEditIncome(i)}" oncomplete="editIncometypeModal.show()" immediate="true" update="edit_incometype_panel">
                                                    <h:graphicImage library="images" name="edit20x20.png" style="border: none;"/>
                                                </p:commandLink>
                                            </div>
                                        </p:column>
                                        <p:column>
                                            <f:facet name="header">
                                                Remover
                                            </f:facet>
                                            <div align="center">
                                                <p:commandLink oncomplete="removeIncometypeModal.show()" immediate="true" update="remove_incometype_panel">
                                                    <f:setPropertyActionListener target="#{configurationBean.incomeType}" value="#{i}"/>
                                                    <h:graphicImage library="images" name="garbage20x20.png" style="border: none;"/>
                                                </p:commandLink>
                                            </div>
                                        </p:column>
                                    </p:dataTable>
                                    <div align="center" style="padding-top: 8px;" >
                                        <p:commandButton title="incluir tipo"  value="Novo Tipo" async="true" immediate="true" update="income_type_form:incometype_panel income_type_form:income_type_msg"  oncomplete="incometypeModal.show()" />
                                    </div>
                                    <div align="center" style="padding-top: 8px;">
                                        <h:outputText value="Nenhum tipo cadastrado" style="color: red;font-size: 14px;padding-bottom: 10px" rendered="#{empty configurationBean.incomeTypes}"/>
                                    </div>
                                </p:panel>
                            </p:outputPanel>

                        </td>
                    </tr>

                </table>

            </p:fieldset>
     </p:panel>
  </h:form>
        
        <p:dialog widgetVar="outcometypeModal" modal="true"  showEffect="explode"  hideEffect="explode"  header="Incluir Tipo de Despesa">
            <h:form id="outcome_type_form">
                <p:outputPanel id="outcometype_panel">
                    <ui:include src="fragments/addOutcomeType.xhtml"/>
                </p:outputPanel>
            </h:form>
        </p:dialog>
        <p:dialog widgetVar="incometypeModal" modal="true" showEffect="explode"  hideEffect="explode"  header="Incluir Tipo de Receita">
            <h:form id="income_type_form">
                <p:outputPanel id="incometype_panel">
                    <ui:include src="fragments/addIncomeType.xhtml"/>
                </p:outputPanel>
            </h:form>
        </p:dialog>

        <p:dialog  modal="true" widgetVar="removeOutcometypeModal" header="Remover Tipo de Despesa" showEffect="fold"  hideEffect="fold" minHeight="150" width="370" closable="true" resizable="false" draggable="true" >
                     <h:form id="removeOutcometype_form" prependId="false">
                         <p:outputPanel id="remove_outcometype_panel">
                              <ui:include src="fragments/remove-outcometype.xhtml"/>
                         </p:outputPanel>
                     </h:form>
                 </p:dialog>
        <p:dialog  modal="true" widgetVar="removeIncometypeModal" header="Remover Tipo de Receita" showEffect="fold"  hideEffect="fold" minHeight="150" width="370" closable="true" resizable="false" draggable="true" >
                     <h:form id="removeIncometype_form" prependId="false">
                         <p:outputPanel id="remove_incometype_panel">
                              <ui:include src="fragments/remove-incometype.xhtml"/>
                         </p:outputPanel>
                     </h:form>
                 </p:dialog>
        <p:dialog  modal="true" widgetVar="editOutcometypeModal" header="Editar Tipo de Despesa" showEffect="explode"  hideEffect="explode" minHeight="150" width="370" closable="true" resizable="false" draggable="true" >
                     <h:form id="editOutcometype_form" prependId="false">
                         <p:outputPanel id="edit_outcometype_panel">
                              <ui:include src="fragments/edit-outcometype.xhtml"/>
                         </p:outputPanel>
                     </h:form>
                 </p:dialog>
        <p:dialog  modal="true" widgetVar="editIncometypeModal" header="Editar Tipo de Receita" showEffect="explode"  hideEffect="explode" minHeight="150" width="370" closable="true" resizable="false" draggable="true" >
                     <h:form id="editIncometype_form" prependId="false">
                         <p:outputPanel id="edit_incometype_panel">
                              <ui:include src="fragments/edit-incometype.xhtml"/>
                         </p:outputPanel>
                     </h:form>
                 </p:dialog>

    </ui:define>

<script type="text/javascript">
    function handleEditUser(args){
        if(! args.validationFailed){
            setTimeout("wait2()",1000);
            return true;
        }
        return false;
    }

    function wait2(){
        editUserDlg.hide();
    }

   
     function setHighlight(fieldId){
        document.getElementById(fieldId).className = 'highlight';

    }

</script>
</ui:composition>